<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //js顶级对象: window
        //☞特点: window顶级对象可以省略不写
        //☞document是window对象中的一个属性
        //☞未加前缀的函数默认被添加到了window对象中
        function fn() { }
        window.fn()



        // window对象属性
        // ☞ navigator对象: 保存浏览器相关信息
        获取当前网络状态 true  false
        navigator.online
        // ☞ location对象: 保存了网页地址
        获取 / 设置网站地址: location.href | location.href = '地址'
        刷新页面: location.reload() | location.reload(true)
        // ☞ history对象: 保存了历史记录
        history.forward()   去下一个历史记录
        history.back()      去上一个历史记录
        history.go(1)       去往相对于当前页面第 1 个页面



        // window对象方法
        文字弹窗     alert();
        输入框弹窗   prompt();
        延迟函数     setTimeout();
        定时器       setInterval();



        // windowd对象事件
        load事件: 当页面中的标签加载完成后触发事件
        resize事件: 当窗口(页面)大小发生改变触发事件




        // 文件读取:流程
        // a) <input type="file">
        // b) 给按钮注册 change事件
        // c) 获取上传文件:  事件源.files[0]    
        // d) 读取文件. 创建一个读取文件的对象    let read = new  FileReader();
        // e) 读取文件 对象.readAsText(文件)    对象.readAsDataURL(图片)
        // f) 获取读取结果: read.onload事件中通过 read.result 获取读取的结果

        let input = document.querySelector('input')
        let h1 = document.querySelector('h1')

        input.onchange = function () {
            let file = input.files[0]
            let reader = new FileReader()
            reader.readAsText(file)
            reader.onload = function () {
                h1.innerHTML = this.result
            }
        }



        // 拖拽读取:流程
        // ☞ dragover事件给目标区域注册
        // ☞ drop事件给目标区域注册
        // ☞ 在事件中阻止浏览器默认行为:  事件对象参数.preventDefault()
        // ☞ 在drop事件中获取文件
        // a) 通过  事件对象参数.dataTransfer.files[0]  获取文件
        // b) 创建读取器对象   new  FileReader()
        // c) 通过对象调用  readAsText(文件) readAsDataURL(文件)
        // d) onload事件中通过 result 获取读取的结果
        let div = document.querySelector('div')
        div.ondragover = function (cc) {
            cc.preventDefault()
        }
        div.ondrop = function (cc) {
            let file = cc.dataTransfer.files[0]
            let reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onload = function () {
                div.innerHTML = ''
                div.style.backgroundImage = `url(${reader.result})`
                // let img = document.createElement('img')
                // img.src = reader.result
                // div.appendChild(img)
            }
            cc.preventDefault()
        }





        // 本地存储
        // 保存数据 setItem 以键值对形式保存
        localStorage.setItem('key', 值);
        // 读取数据 getItem
        localStorage.getItem('key');
        // 删除数据 removeItem
        localStorage.removeItem('key');

        // localStorage数据
        // 持久化保存
        // 数据不会自动消失
        // 可以跨页面访问

        // sessionStorage
        // 页面关闭数据消失 
        // 只能在当前页面中访问


    </script>
</body>

</html>